﻿<!DOCTYPE html>

<html class="app-ui">
<head>
    <!-- Meta -->
    <meta charset="UTF-8"/>

    <!--查询动作-1  -->
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>

</head>
<style>
    body {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    /* 定义表格的基本样式 */
    table {
        width: 100%; /* 表格宽度自适应容器 */
        border-collapse: collapse; /* 边框合并，避免双线 */
        margin-bottom: 20px; /* 底部留白 */
    }

    /* 设置表格边框和单元格间距 */
    th, td {
        border: 1px solid #ddd; /* 细灰色边框 */
        padding: 8px; /* 内边距 */
        text-align: left; /* 文本左对齐 */
    }

    /* 强调表头 */
    th {
        background-color: #00c0ef; /* 绿色背景 */
        color: white; /* 白色文本 */
        font-weight: bold; /* 加粗字体 */
    }

    /* 鼠标悬停时改变行颜色 */
    tr:hover {
        background-color: #f5f5f5; /* 浅灰色背景 */
    }

    /* 为奇数行添加不同颜色以提高可读性 */
    tr:nth-child(even) {
        background-color: #f9f9f9; /* 浅灰白色背景 */
    }

    /* 响应式设计：当屏幕宽度小于600px时调整布局 */
    @media screen and (max-width: 600px) {
        table, thead, tbody, th, td, tr {
            display: block;
        }

        /* 隐藏原始表头 */
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        tr {
            margin-bottom: 15px;
        }

        td {
            /* 模拟表头 */

            &:before {
                content: attr(data-label); /* 使用data-label属性作为新表头 */
                float: left;
                font-weight: bold;
            }
        }
    }
</style>
<body class="app-ui layout-has-drawer layout-has-fixed-header">

<div id="app" class="card-block">
<!--条件查询-1 -->
    <div class="form-group">
        <label for="teamName">团队名字</label>
        <input type="text" class="form-control" name="teamName" placeholder="团队名字" v-model="searchInfo.teamName">
        <label for="teamState">团队状态</label>
        <select class="form-control" name="teamState" v-model="searchInfo.teamState">
            <option value="on">正常</option>
            <option value="off">停用</option>
        </select>

        <label for="teamCity">所在城市</label>
        <input type="text" class="form-control" name="teamCity" placeholder="团队所在城市"
               v-model="searchInfo.teamCity">

        <button @click="queryByJavaeeTeam">---查 询---
        </button>
    </div>


    <!--增加动作-0 显示隐藏的页面 -->
    <button name="" @click="create">新增</button>
    <!--增加动作-3 调用增加方法 -->
    <button v-show="isCreate" @click="confirmCreate">确认增加</button>
    <!--增加动作-1 写一个表单 -->
    <div v-show="isCreate" class="createNewUser card-block">
        <label for="teamName">团队名字</label>
        <input id="teamName" type="text" v-model="newInfo.teamName">
        <label for="teamSlogen">口号</label>
        <input id="teamSlogen" type="text" v-model="newInfo.teamSlogen">
        <label for="teamDesc">团队介绍</label>
        <input id="teamDesc" type="text" v-model="newInfo.teamDesc">
        <label for="teamIcon">图标</label>
        <input id="teamIcon" type="text" v-model="newInfo.teamIcon">
        <label for="teamState">团队状态</label>
        <input id="teamState" type="text" v-model="newInfo.teamState">
        <label for="teamCity">团队所在城市</label>
        <input id="teamCity" type="text" v-model="newInfo.teamCity">
    </div>
    <table class="table table-bordered table-striped table-vcenter js-dataTable-simple">
        <thead>
        <tr>
            <th>团队编号</th>
            <th>团队名字</th>
            <th>口号</th>
            <th>团队介绍</th>
            <th>图标</th>
            <th>团队状态</th>
            <th>团队所在城市</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <div class="table">
            <!--查询动作-4 info数据显示 -->
            <tr class="odd gradeX" v-for="(value,index) in info" :key="index">
                <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text"
                           :disabled="!(thisIndex===index)" v-model="value.teamId"></td>
                <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text"
                           :disabled="!(thisIndex===index)" v-model="value.teamName"></td>
                <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text"
                           :disabled="!(thisIndex===index)" v-model="value.teamSlogen"></td>
                <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text"
                           :disabled="!(thisIndex===index)" v-model="value.teamDesc"></td>
                <td>
                    <img v-show="!(thisIndex===index)" :src="value.teamIcon" weight="48px" height="48px" alt="">
                    <input v-show="thisIndex===index" :class="{isedit:thisIndex===index}" class="notedit" type="text"
                           :disabled="!(thisIndex===index)" v-model="value.teamIcon">
                </td>
                <td>
                    <select :class="{isedit:thisIndex===index}" class="notedit" :disabled="!(thisIndex===index)"
                            v-model="value.teamState">
                        <option value="on" :checked="value.teamState==='on'">正常</option>
                        <option value="off" :checked="value.teamState==='off'">停用</option>
                    </select>
                </td>

                <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text"
                           :disabled="!(thisIndex===index)" v-model="value.teamCity"></td>
                <td class="text-center">
                    <div class="btn-group">
                        <!--修改动作-1 修改按钮事件 -->
                        <button
                                @click="thisIndex=index"
                                class="btn btn-xs btn-default"
                                type="button"
                                data-toggle="tooltip"
                                title="Edit Client">
                            修改
                        </button>
                        <!--删除动作-1 删除按钮事件   -->
                        <button
                                class="btn btn-xs btn-default"
                                type="button"
                                data-toggle="tooltip"
                                title="Remove Client"
                                @click="deleteItem(index)">
                            删除
                        </button>
                        <!--修改动作-2 保存按钮事件 -->
                        <button @click="save(index)" class="btn btn-xs btn-default" type="button" data-toggle="tooltip"
                                title="Remove Client">
                            <span>保存</span>
                        </button>
                    </div>
                </td>
            </tr>
        </div>

        </tbody>
    </table>
</div>
<script>
    const app = new Vue({

        methods: {
            <!-- 条件查询-2  -->
            queryByJavaeeTeam() {
                axios.get('http://localhost:8080/javaeeTeam/queryByJavaeeTeam', {params: this.searchInfo}
                ).then(response => {
                    if (response.status === 200) {
                        console.log(response.data);
                        this.info = response.data //   赋值给info
                    }
                }).catch(error => {
                    console.log(error);
                })

            },
            <!-- 查询动作-2  -->
            //获取列表
            getList() {
                axios.get('http://localhost:8080/javaeeTeam/queryAll').then(response => {
                    // console.log(response);
                    if (response.status === 200) {
                        // console.log(response.data);
                        this.info = response.data //   赋值给info
                    }
                })

            },
            //新增按钮事件,显示表单
            create() {
                this.isCreate = !this.isCreate
            },
            <!--增加动作-4 调用增加方法 -->
            //确认新增
            confirmCreate() {
                console.log("确认新增:" + this.newInfo);
                axios.post('http://localhost:8080/javaeeTeam/save', this.newInfo).then(response => {
                    // console.log("确认新增:"+this.newInfo.userName+"======");
                    //  console.log(response);
                    if (response.status === 200) {
                        // console.log(response.data.ms);
                        this.getList()

                        this.isCreate = !this.isCreate //关闭显示表单
                        // alert('新增成功')
                    }
                })
            },
            <!--删除动作-2 删除按钮事件   -->
            //删除按钮事件
            deleteItem(index) {
                if (confirm("您确定要执行此操作吗？" + this.info[index].teamId)) {
                    axios.delete('http://localhost:8080/javaeeTeam/' + this.info[index].teamId).then(response => {
                        if (response.status === 200) {
                            console.log("删除成功" + this.info[index].teamId);
                            this.getList()

                        }
                    })
                } else {
                    alert('已取消删除')
                }

            },
            <!--修改动作-3 保存按钮事件 -->
            //保存按钮事件
            save(index) {
                axios.put('http://localhost:8080/javaeeTeam/update', this.info[index]).then(response => {
                    if (response.status === 200) {
                        //  console.log(response.data);
                        this.getList()
                        // alert('编辑成功')
                    }
                })
                this.thisIndex = ''
            },
            removeEdit() {

            }
        },

        data() {
            return {
                <!--查询动作-3 info数据初始化集合对象 -->
                info: [],
                thisIndex: '',
                isCreate: false,
                <!--增加动作-2 newInfo来传递数据OOP -->
                newInfo: {
                    teamName: '漳州港',
                    teamSlogen: '一切皆有可能',
                    teamDesc: '我们是一支热爱生活的团队，我们热爱生活，热爱学习，热爱分享，热爱创造，热爱生活。',
                    teamIcon: 'img/face/face_1.jpg',
                    teamState: 'on',
                    teamCity: '厦门'

                },
                <!--条件查询-3 searchInfo来传递数据 -->
                searchInfo: {
                    teamName: '',
                    teamState: 'on',
                    teamCity: '厦门'
                }

            }
        },
        <!--查询动作-5 调用方法-->
        mounted() {
            //Vue生命周期中第四个函数：该函数在执行过程中，已经将数据渲染到界面中，并且已经更新页面。
            this.getList()
        }
    })
    const vm = app.$mount("#app")
    console.log("------vue-------ok-----------------")
</script>
</body>
<style>
    .createNewUser {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

    .createNewUser input {
        border-radius: 10px;
        outline: none;
        border: 1px solid rgb(115, 115, 115);
    }

    .table tr td input {
        width: 150px;
    }

    .notedit {
        outline: none;
        border: none;
        background: transparent;
    }

    .isedit {
        outline: 0;
        border: 1px solid rgb(160, 159, 159);
        border-radius: 5px;
    }

    .btn-group {
        display: flex;
    }
</style>
</html>